<template>
    <div :id="props.mapId" class="map_content"></div>
    <slot name="map_tools"> </slot>
</template>

<script setup lang="ts">
import { mapHooks } from "@/components/map/mapHooks";
import type { centerType } from "@/components/map/map";

const { initMap } = mapHooks();
let mapInit: any = ref(null);
const emit = defineEmits(["mapInitSuccess"]);

const props = defineProps({
    mapId: {
        required: true,
        default: "" as string,
    },
    center: {
        required: false,
        default: () => ["", ""] as centerType, // 设置地图中心点 值改变立即定位
    },
});

watch(
    () => props.center,
    (newVal) => {
        if (newVal.length === 2 && newVal[0] !== "") {
            mapInit.map.setCenter(newVal);
        }
    },
    { deep: true, immediate: true }
);

onMounted(async () => {
    mapInit = await initMap(props.mapId);
    emit("mapInitSuccess", mapInit);
});
</script>

<style>
.map_content {
    width: 100%;
    height: 100%;
}
</style>
